<template>
	<view class="nav-bar">
		<view class="score-box">
			<text class="label">标注项目通过个数</text>
			<text class="value">{{ records.filter(item => item.status === '3').length }}</text>
		</view>

	</view>
<!-- 	<view class="rank-notice" @click="navigateToRank">
		<view class="rank-left">
			<uni-icons type="medal" size="40" color="#ffd700"></uni-icons>
			<text class="notice-text">查看积分排行榜</text>
		</view>
		<uni-icons type="forward" size="32" color="#999"></uni-icons>
	</view> -->
	<scroll-view scroll-y class="list-container">
		<view v-for="item in records" :key="item.id" class="record-item" @click="viewDetail(item.submitId)">
			<view class="left">
				<text class="type">{{ typeMap[item.type] }}</text>
				<text class="time">申请时间：{{ item.createTime }}</text>
				<text class="description" v-if="item.description">{{ item.description }}</text>
			</view>
			<view class="right">
				<text :class="['score', item.workload? 'add' : 'sub']">
					<view v-if="item.status == '3'">工作量+{{ item.workload }}</view>
					<!-- <view v-else-if="item.status === '1'" style="color: darkorange;">{{ item.workload }}</view> -->
				</text>
				<text :class="['status', statusClass[item.status]]">
					{{ statusMap[item.status] }}
				</text>
				<!-- 显示驳回原因 -->
				<text v-if="item.status === '4'" class="reject-reason">
					{{ item.remark }}
				</text>
			</view>
		</view>

		<view v-if="records.length === 0" class="empty">
			<image src="/static/empty.png" class="empty-img" />
			<!-- <text>暂无审核记录</text> -->
		</view>

		<view class="float-btn" @click="handleAdd">
			<uni-icons type="plus" size="30" color="#fff"></uni-icons>
		</view>
	</scroll-view>
</template>
<script>
// #ifdef MP-WEIXIN
export default {
  onShareAppMessage() {
    return {
      title: "高潜人才",
      path: `/pages/markIntegration/markIntegration`
    }
  },
  onShareTimeline() {
      return {
        title: '专业人才测评，发现你的潜力！',
        query: 'from=timeline',          // 可选参数
        imageUrl: '/static/wx.png' // 朋友圈专用图片
      }
    }
}
// #endif
</script>
<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import {
		http
	} from '../../utils/requestUtil';

	// 审核记录数据
	const records = ref([])
	const score = ref(0)
	// 状态映射（适配字符串类型状态值）
	const statusMap = {
		'0': '审核中',
		'1': '审核中',
		'2': '审核中',
		'3': '已通过',
		'4': '已驳回'
	}

	const statusClass = {
		'0': 'pending',
		'1': 'pending',
		'2': 'pending',
		'3': 'approved',
		'4': 'rejected'
	}

	// 类型映射（根据实际接口返回类型值）
	const typeMap = {
		training: '培训积分',
		// 根据实际接口可能返回的类型补充映射
		project: '项目积分',
		activity: '活动积分'
	}

	// 计算有效积分（状态为1的积分总和）
	const validScore = computed(() => {
		return records.value
			.filter(item => item.status === '3')
			.reduce((sum, item) => sum + Number(item.score), 0)
	})

	// 计算审核中数量（状态为0的记录数）
	const pendingCount = computed(() => {
		return records.value.filter(item => item.status != '3').length
	})

	const viewDetail = (id) => {
		uni.navigateTo({
			url: `/pages/markIntegration/markDetail/markDetail?id=${id}`
		})
	}

	const handleAdd = () => {
		uni.navigateTo({
			url: '/pages/markIntegration/addMI/addMI'
		})
	}
	const navigateToRank = () => {
		uni.navigateTo({
			url: "/pages/integration/integarlRank/integarlRank"
		})
	}
	const loadData = async () => {
		try {
			const userId = uni.getStorageSync('userInfo').userId
			const res = await http.get('/remark/project/user/list?pageSize=1000&orderBy=create_time desc')
			console.log(res)
			records.value = res.rows.map(item => ({
				...item,
				// 转换文件字符串为数组
				files: item.files ? item.files.split(',') : [],
				// 转换时间格式（示例：保留原始时间）
				createTime: item.createTime.slice(0, 16) // 截取年月日时分
			}))

			score.value = res.additionalInteger
			// 更新本地存储 获取 userInfo 数据
			let userInfo = uni.getStorageSync('userInfo');
			// 将 score 减去 1500
			userInfo.score = score.value;
			uni.setStorageSync('userInfo', userInfo);

		} catch (error) {
			console.error('数据加载失败:', error)
			uni.showToast({
				title: '数据加载失败',
				icon: 'none'
			})
		}
	}

	onMounted(() => {
		// score.value=uni.getStorageSync('userInfo').score
		loadData()
		uni.$on('refreshData', loadData);
	})
</script>
<style>
	/* 头部导航栏（参考网页1、2、3） */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.nav-bar {
		display: flex;
		justify-content: space-around;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		background: #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.nav-bar .score-box {
		text-align: center;
	}

	.nav-bar .score-box .label {
		display: block;
		color: #666;
		font-size: 28rpx;
	}

	.nav-bar .score-box .value {
		font-size: 40rpx;
		font-weight: bold;
		color: #409eff;
	}

	.rank-notice {
		/* 采用 flex 布局，让子元素水平排列，并且两端对齐 */
		display: flex;
		justify-content: space-between;
		/* 让子元素在交叉轴上垂直居中对齐 */
		align-items: center;
		/* 内边距，上下 25rpx，左右 30rpx */
		padding: 25rpx 30rpx;
		/* 外边距，上下 20rpx，左右 30rpx */
		margin: 20rpx 30rpx;
		/* 背景颜色为白色 */
		background: #fff;
		/* 圆角半径为 16rpx */
		border-radius: 16rpx;
		/* 添加阴影效果，水平偏移 0，垂直偏移 4rpx，模糊半径 12rpx，颜色为 rgba(0,0,0,0.08) */
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.rank-notice .rank-left {
		/* 采用 flex 布局，让子元素水平排列 */
		display: flex;
		/* 让子元素在交叉轴上垂直居中对齐 */
		align-items: center;
	}

	.rank-notice .rank-left .notice-text {
		/* 左侧外边距为 20rpx */
		margin-left: 20rpx;
		/* 字体大小为 28rpx */
		font-size: 28rpx;
		/* 字体颜色为 #333 */
		color: #333;
	}

	/* 审核列表（参考网页4、5、6） */
	.list-container {
		height: calc(100vh - 180rpx);
		padding-top: 20rpx;
	}

	.list-container .record-item {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.list-container .record-item .left {
		flex: 2;
	}

	.list-container .record-item .left .type {
		display: block;
		font-size: 32rpx;
		color: #333;
	}

	.list-container .record-item .left .time {
		font-size: 24rpx;
		color: #999;
	}

	.list-container .record-item .right {
		flex: 1;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.list-container .record-item .right .score {
		font-size: 36rpx;
	}

	.list-container .record-item .right .score.add {
		color: #67c23a;
	}

	.list-container .record-item .right .score.sub {
		color: #f56c6c;
	}

	.list-container .record-item .right .status {
		display: block;
		font-size: 24rpx;
	}

	.list-container .record-item .right .status.pending {
		color: #e6a23c;
	}

	.list-container .record-item .right .status.approved {
		color: #67c23a;
	}

	.list-container .record-item .right .status.rejected {
		color: #f56c6c;
	}

	.list-container .empty {
		text-align: center;
		padding: 100rpx 0;
	}

	.list-container .empty .empty-img {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.float-btn {
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #409EFF, #2979FF);
		box-shadow: 0 8rpx 24rpx rgba(64, 158, 255, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}

	/* 暗黑模式适配（参考网页3样式优化） */
	@media (prefers-color-scheme: dark) {
		.float-btn {
			background: linear-gradient(135deg, #2c3e50, #34495e);
		}
	}

	/* 在原有样式基础上补充以下样式 */
	.description {
		display: block;
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
		max-width: 400rpx;
		/* 这里的 text-ellipsis(2) 是 SCSS 混入，CSS 没有直接对应，所以未处理 */
	}

	.reject-reason {
		display: block;
		font-size: 24rpx;
		color: #f56c6c;
		margin-top: 10rpx;
	}

	/* 调整右侧布局 */
	.right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
</style>